<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边栏</title>
    <link rel="stylesheet" href="../css/side.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    
</head>

<body>
    <div class="d-side">
        <div class="d-sidecon">
            <div class="d-num"><i class="iconfont icon-evitaretraffic
                "></i> 购<br>物<br>车<br>
                <div class="d-box">
                    <div class="d-tri1"></div>
                    <p class="d-txt"><span>您的购物车暂无商品，赶紧<a href="list.html">选购</a>吧</span></p>
                    <ul class="d-list">
                        <!-- <li>
                            <input type="checkbox">
                            <img src="../images/noprc.png" alt="">
                            <h3>哈哈哈哈哈</h3>
                            <span>￥288</span>
                            <i></i>
                            <b>删除</b>
                        </li> -->
                    </ul>
                    <div class="d-sum">
                        <hr><br>
                        <input id="checkboxAll" type="checkbox">
                        <label for="checkboxAll">全选</label>
                        <span>共 <i>0</i> 件商品，总计：￥<strong>0</strong></span>
                        <a href="car.html"><input type="button" value='去结算'></a>
                        <br>
                    </div>
                </div></div>
            <section class="d-backcolor">在 线<br>销 售
                <div class="d-qq">
                    <li>在线销售顾问</li>
                    <li><img src="../images/qq1.gif" alt="">售前咨询</li>
                    <li><img src="../images/qq1.gif" alt="">售后服务</li>
                    <li><img src="../images/qq1.gif" alt="">意见反馈</li>
                </div>
                <div class="d-tri3"></div></section>
            <section class="d-back1"><i class="iconfont icon-weixin
                "></i><br>微 信<p class="d-mask1">官 方<br>微 信</p>
                <p class="d-wei"><img src="../images/fudao.png" alt="">扫二维码，关注官方微信</p>
                <div class="d-tri2"></div></section>
            <section class="d-back2"><i class="iconfont icon-collection
                "></i><br>建 议<p class="d-mask2">建 议<br>有 奖</p></section>
            <section class="d-back3"><i class="iconfont icon-mark"></i><br>收 藏
            <p class="d-mask3">商 品<br>收 藏</p></section>
            
            
        </div>
        <div class="d-top"><p class="d-mask4">返 回<br>顶 部</p></div>
        
    </div>
    
    <script src="../jquery-1.9.1/jquery-1.9.1.min.js"></script>
    <script>
        let arr = JSON.parse(localStorage.getItem('shopArr'))
        let dtxt = document.querySelector('.d-txt')
        let dsum = document.querySelector('.d-sum')
        let dList = document.querySelector('.d-list')
        let dSpan=document.querySelector('.d-num span')

        if (arr === null) {
            $('.d-txt').show();
            $('.d-sum').css('display', 'none');
        } else {
            $('.d-txt').css('display', 'none');
            $('.d-sum').show();
            // 渲染数据
            arr.forEach(function (ele) {
                let str = `<li data-id="${ele.id}">
                <input type="checkbox">
                <img src="${ele.img}" alt="">
                <h3>${ele.title}</h3>
                <span>${ele.price}</span>
                <i>${ele.count}</i>
                <b class='d-del'>删除</b>
            </li>`
                dList.innerHTML += str
            })
        }

        let dInpAll = document.querySelector('#checkboxAll')
        let dInp = document.querySelectorAll('.d-list input[type=checkbox]')
        let count = 0
        // 全选反选
        $('#checkboxAll').change(function () {
            if (this.checked) {
                dInp.forEach(function (ele) {
                    ele.checked = true
                    count = dInp.length
                })
                // 计算价格
                arr.forEach(function (ele, index) {
                    console.log(ele.price.slice(1) * ele.count)
                    $('.d-sum strong').html((Number($('.d-sum strong').html()) + ele.price.slice(1) * ele.count).toFixed(2))
                    $('.d-sum i').html((Number($('.d-sum i').html()) + ele.count))
                })
            } else {
                dInp.forEach(function (ele) {
                    ele.checked = false
                    count = 0
                })
                $('.d-sum strong').html('0.00')
                $('.d-sum i').html('0')
            }
        })
        
        // 计数选中
        dInp.forEach(function (ele, index) {
            ele.addEventListener('change', function () {
                // 算总价
                var id = this.parentNode.getAttribute('data-id')
                if (ele.checked) {
                    count++
                    arr.forEach(function (ele, index) {
                        if (ele.id === id) {
                            ele.flag = true
                            $('.d-sum strong').html((Number($('.d-sum strong').html()) + ele.price.slice(1) * ele.count).toFixed(2))
                            $('.d-sum i').html((Number($('.d-sum i').html()) + ele.count))
                        }
                    })
                    console.log(arr)
                } else {
                    count--
                    arr.forEach(function (ele, index) {
                        if (ele.id === id) {
                            $('.d-sum strong').html((Number($('.d-sum strong').html()) - ele.price.slice(1) * ele.count).toFixed(2))
                            $('.d-sum i').html((Number($('.d-sum i').html()) - ele.count))
                        }
                    })
                }
                if (count === dInp.length) {
                    dInpAll.checked = true
                } else {
                    dInpAll.checked = false
                }

            })
        })

        // 事件委托
        $('.d-list').click(del)
        function del(ev) {
            // 删除
            if (ev.target.className === 'd-del') {
                ev.target.parentNode.remove()
                var id = ev.target.parentNode.getAttribute('data-id')

                arr.forEach(function (ele, index) {
                    if (ele.id === id) {
                        $('.d-sum strong').html((Number($('.d-sum strong').html()) - ele.price.slice(1) * ele.count).toFixed(2))
                        $('.d-sum i').html((Number($('.d-sum i').html()) - ele.count))
                        arr.splice(index, 1)

                        if ($('.d-sum strong').html() <= 0) {
                            $('.d-sum strong').html('0.00')
                        }
                        if ($('.d-sum i').html() <= 0) {
                            $('.d-sum i').html('0')
                        }
                    }
                })
                localStorage.setItem('shopArr', JSON.stringify(arr))
            }
        }
        console.log(arr)
        // localStorage.setItem('shopArr', JSON.stringify(arr))
    </script>
    <script>
        $('.d-back1').mouseenter(function(){
            $('.d-mask1').slideDown()
            $('.d-wei').show()
            $('.d-tri2').show()
        })
        $('.d-back1').mouseleave(function(){
            $('.d-mask1').slideUp()
            $('.d-wei').hide()
            $('.d-tri2').hide()
        })
        $('.d-back2').mouseenter(function(){
            $('.d-mask2').slideDown()
        })
        $('.d-back2').mouseleave(function(){
            $('.d-mask2').slideUp()
        })
        $('.d-back3').mouseenter(function(){
            $('.d-mask3').slideDown()
        })
        $('.d-back3').mouseleave(function(){
            $('.d-mask3').slideUp()
        })
        $('.d-num').mouseenter(function(){
            $('.d-box').show()
        })
        $('.d-box').mouseenter(function(){
            $('.d-box').show()
        })
        $('.d-num').mouseleave(function(){
            $('.d-box').hide()
        })
        $('.d-box').mouseleave(function(){
            $('.d-box').hide()
        })
        $('.d-backcolor').mouseenter(function(){
            $('.d-qq').show()
            $('.d-tri3').show()
        })
        $('.d-backcolor').mouseleave(function(){
            $('.d-qq').hide()
            $('.d-tri3').hide()
        })
        $('.d-top').mouseenter(function(){
            $('.d-mask4').slideDown()
        })
        $('.d-top').mouseleave(function(){
            $('.d-mask4').slideUp()
        })
        var  dTop=document.querySelector('.d-top')
        dTop.addEventListener('click',function(){
            var timer = setInterval(function () {
            document.documentElement.scrollTop -= 150

            if (document.documentElement.scrollTop === 0) {
            clearInterval(timer)
        }
    }, 80)
})
    </script>

</body>

</html>